<template>
	<view class="page-content-box">
		<view v-show="hasLoad">
			<view class="top-status-box">
				<view class="name">{{order_info.orderStatusText}}</view>
				<view class="flex-block-row">
					<view v-if="order_info.orderStatus==1" class="text flex-1">订单等待消费中。</view>
					<view v-else-if="order_info.status==2&&order_info.refund_status==0" class="text flex-1">订单已完成，祝您用餐愉快！</view>
					<view v-else-if="order_info.status==3" class="text flex-1">订单已取消，期待您的下次光临！</view>
					<view v-if="order_info.orderStatus==1" class="flex-1 text-right">
						<button v-if="order_info.orderStatus==1" class="bottom-btn bg-pay-btn" type="primary" @click="goToPay">手工结账</button>
						<button v-show="showCancel && order_info.orderStatus==1" class="bottom-btn bg-cancel-btn" type="primary" @click="goToCancel()">取消订单</button>
					</view>
				</view>
			</view>
			<view class="order-detail-box">
				<view class="order-item-box">
					<view class="order-title">
						<view class="top-title">
							订单详情
						</view>
					</view>
					<view class="order-item" v-for="(item,index) in goodsList" :key="index">
						<view class="order-detail flex-block-row" >
							<view class="img-box">
								<image style="width: 130rpx; height: 130rpx;border-radius: 20rpx;" mode="aspectFill"  :src="baseUrl+'/api/sys/file/download?attachId=' + item.coverImgId+'&width=300'"></image>
							</view>
							<view class="detail-box">
								<view class="name txt-ellipsis">{{item.cookName}}</view>
								<view class="detail-right flex-block-row">
									<view class="num">数量：× {{item.count}}</view>
									<view class="new-cost">￥{{item.cookPrice}}</view>
								</view>
								<view v-if="item.remark" class="num" style="color: crimson;">
									备注：{{item.remark}}
								</view>
							</view>
						</view>
					</view>
				
					<view class="order-item" v-for="(item,index) in order_info.listDetailAdd" :key="index">
						<view class="order-detail flex-block-row" >
							<view class="img-box">
								<image style="width: 130rpx; height: 130rpx;border-radius: 20rpx;" mode="aspectFill"  :src="baseUrl+'/api/sys/file/download?attachId=' + item.coverImgId+'&width=300'"></image>
							</view>
							<view class="detail-box">
								<view class="name txt-ellipsis">{{item.cookName}}<span style="color: crimson;border:2rpx solid crimson;margin-left: 20rpx; border-radius: 10rpx;padding: 5rpx 10rpx;">{{item.statusText}}</span></view>
								<view class="detail-right flex-block-row">
									<view class="num">数量：× {{item.count}}</view>
									<view class="new-cost">￥{{item.cookPrice}}</view>
								</view>
								<view v-if="item.remark" class="num" style="color: crimson;">
									备注：{{item.remark}}
								</view>
							</view>
						</view>
					</view>
					<view class="order-item" v-for="(item,index) in order_info.listDetailDelete" :key="index">
						<view class="order-detail flex-block-row" >
							<view class="img-box">
								<image style="width: 130rpx; height: 130rpx;border-radius: 20rpx;" mode="aspectFill"  :src="baseUrl+'/api/sys/file/download?attachId=' + item.coverImgId+'&width=300'"></image>
							</view>
							<view class="detail-box">
								<view class="name txt-ellipsis">{{item.cookName}}<span style="color: green;border:2rpx solid green;margin-left: 20rpx; border-radius: 10rpx;padding: 5rpx 10rpx;">{{item.statusText}}</span></view>
								<view class="detail-right flex-block-row">
									<view class="num">数量：× {{item.count}}</view>
									<view class="new-cost">￥{{item.cookPrice}}</view>
								</view>
								<view v-if="item.remark" class="num" style="color: green;">
									备注：{{item.remark}}
								</view>
							</view>
						</view>
					</view>
				
				
					<view class="order-cost-box">
						<view class="order-cost flex-block-row">
							<view class="cost-name">订单合计</view>
							<view class="text-right">￥{{order_info.amount}}</view>
						</view>

					</view>
					
				</view>
			</view>
			
			<view class="order-detail-other">
			
				<!-- <view class="position-r">订单编号：{{order_info.sub_order_number}} <button class="copy-now" type="primary" @click="copyOrderNum(order_info.order_number)">复制</button></view> -->
				<view>下单时间：{{order_info.createdate}}</view>
				<view>桌台：{{order_info.tableCode}}</view>
				<view v-if="order_info.orderStatus==2">支付时间：{{order_info.updatedate}}</view>		
				
			</view>
		</view>
		<!-- <toast></toast> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl:this.$client.IMG_URL,
				order_info:{},
				goodsList:[],
				icode:'',
				hasLoad:false,
				tabIndex:0,
				isPayNow:false,
				payCheck:true,
				showCancel:true,
				showRefund:true,
			}
		},
		onLoad(options) {
			//console.log(JSON.parse(options.data));
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#fda600'
			})
			this.icode = options.icode;
		//this.tabIndex = options.tabIndex;
		},
		onShow(){
			
				this.getInitData();
			
			
		},
		onHide(){
			//clearInterval(interval);
		},
		methods: {
			getInitData(){
				var _this = this;
				_this.$loading(); 
				this.hasLoad = false;
				this.$client.get('/api/biz/order/getModelEx', {id:this.icode}, function(res,message){
					_this.order_info = res;
					_this.goodsList = res.listDetail;
					_this.$loading(false); 
					_this.hasLoad = true;
				},function(res){
					_this.$loading(false); 
					_this.hasLoad = true;
				},true);
			},
			
			goToGoods(sku_number){
				uni.navigateTo({
					url: "/pages/goodsdetail/goodsdetail?sku_number="+sku_number,
				})
			},
			goEvaluate(){
				var orderStr = JSON.stringify(this.goodsList);
				uni.navigateTo({
					url: "/pages/eval/eval?goodsList="+orderStr,
				})
			},
			//手工结账
			goToPay(){
				var _this = this;
				//console.log(id);
				this.showCancel = false;
				uni.showLoading({
					title: '加载中...'
				});
				this.$client.post('/api/biz/order/settleAccounts', {id:this.icode}, function(res,message){
					//console.log(res);
					uni.hideLoading();
					_this.$util.showToast({title:message});
					setTimeout(()=>{
						uni.reLaunch({
						
							url: "/pages/paysuccess/paysuccess?orderId=" + _this.icode
						})
					})

				},function(res){
					uni.hideLoading();
					_this.showCancel = true;
					if(res){
						_this.$util.showToast({title:res});
					}
				},true);
				
			},
			//取消顶顶那
			goToCancel(){
				var _this = this;
				//console.log(id);
				this.showCancel = false;
				uni.showLoading({
				    title: '加载中...'
				});
				this.$client.post('/api/biz/order/cancel', {id:this.icode}, function(res,message){
					//console.log(res);
					uni.hideLoading();
					_this.$util.showToast({title:message});
					
					_this.getInitData();
					
				},function(res){
					uni.hideLoading();
					_this.showCancel = true;
					if(res){
						_this.$util.showToast({title:res});
					}
				},true);
			},
			goToRefund(){
				var _this = this;
				this.showRefund = false;
				uni.showLoading({
				    title: '处理中...'
				});
				this.$client.post('/api/refund/orderrefund', {order_number:this.order_info.sub_order_number}, function(res,message){
					uni.hideLoading();
					_this.$util.showToast({title:message});
				},function(res){
					uni.hideLoading();
					_this.showRefund = true;
					if(res){
						_this.$util.showToast({title:res});
					}
				},true);
			},
			getWechatBack(){
				var _this = this;
				this.$client.post('/api/refund/queryrefundorder', {sub_order_number:this.order_info.sub_order_number}, function(res,message){
					//console.log(res);
					_this.getInitData();
				},function(res){
					
				},true);
			}
		}
	}
</script>

<style>
	.page-content-box{
		overflow-y: auto;
		padding: 0 20rpx 115rpx 20rpx;
		box-sizing: border-box;
	}
	.top-status-box{
		padding: 16rpx 0;
	}
	.top-status-box .name{
		font-size:44rpx;
		font-weight:bold;
		color:rgba(22,22,22,1);
	}
	.top-status-box .text{
		font-size:28rpx;
		font-weight:bold;
		color:rgba(22,22,22,1);
	}
	.top-status-box .text text{
		font-size:28rpx;
		font-weight:bold;
		color:#fda600;
	}
	.top-status-box .refund-tips{
		font-size: 24rpx;
		color: rgba(255,0,0,1);
		line-height: 44rpx;
		padding-bottom: 10rpx;
	}
	.top-status-box .tips{
		font-size:24rpx;
		color:rgba(153,153,153,1);
	}
	.top-status-box .bottom-btn{
		width: auto;
		padding: 0 30rpx;
		height:60rpx;
		border:none;
		background: #FFFFFF;
		box-shadow: 0px 2px 8px 0px rgba(193, 193, 193, 0.5);
		border-radius: 20px;
		line-height: 60rpx;
		font-size:24rpx;
		color:#fff;
		display: inline-block;
	}
	.top-status-box .bottom-btn+.bottom-btn{
		margin-left: 20rpx;
	}
	.top-status-box .bg-pay-btn{
		color:#fff;
		background: #fda600;
		box-shadow: 0px 2px 8px 0px rgba(255, 109, 51, 0.5);
	}
	.top-status-box .bg-cancel-btn{
		color:#666;
	}
	.order-detail-box{
		width: 100%;
		padding: 10rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius:20rpx;
		margin-bottom: 20rpx;
	}
	.order-detail-box .order-item{
		padding: 20rpx 0;
		box-sizing: border-box;
		border-bottom: 1rpx solid rgba(238,238,238,1);
	}
	.order-item-box .order-title .top-title image{
		vertical-align: middle;
		margin-right: 10rpx;
		margin-top: -6rpx;
	}
	.order-detail-box .order-item .order-detail{
		width: 100%;
		height:100%;
		align-items: flex-start;
	}
	.order-item .order-detail .img-box{
		width: 120rpx;
		height: 120rpx;
	}
	.order-item .order-detail .detail-box{
		width: 100%;
		padding-left: 20rpx;
		box-sizing: border-box;
	}
	.order-item .order-detail .detail-box .name{
		font-size:28rpx;
		color:rgba(22,22,22,1);
		height:50rpx;
		line-height:50rpx;
	}
	.order-item .order-detail .detail-box .num{
		flex: 1;
		font-size:28rpx;
		color:rgba(102,102,102,1);
		line-height:32rpx;
		margin-top: 10rpx;
	}
	.order-item .order-detail .detail-box .new-cost{
		flex: 1;
		font-size:28rpx;
		color:rgba(253, 166, 0, 1.0);
		text-align: right;
		line-height:32rpx;
		margin-top: 10rpx;
	}
	.order-cost-box{
		padding: 20rpx 0;
	}
	.order-detail-box .order-cost>view{
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		font-size:28rpx;
		color:rgba(22,22,22,1);
	}
	.order-detail-box .cost-all .text-right{
		font-size:32rpx;
		color:rgba(255,0,0,1);
	}
	.order-detail-box .order-cost .cost-name{
		font-size: 24rpx;
		font-weight: bold;
	}
/* 	.order-detail-box .order-cost>view{
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		font-size:28rpx;
		color:rgba(22,22,22,1);
	}
	.order-detail-box .cost-all .text-right{
		font-size:32rpx;
		color:rgba(255,0,0,1);
	} */
	.order-detail-box .remark-box .cost-name{
		width: 160rpx;
	}
	.order-detail-box .remark-box .text-right{
		width: 510rpx;
	}
	.order-detail-box .order-cost .input-content{
		width: 510rpx;
		height: 60rpx;
		line-height: 60rpx;
		border: none;
		font-weight: normal;
		vertical-align: top;
		padding: 0;
		text-align: left;
	}
	.order-detail-addr{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
	}
	.order-detail-addr view{
		font-size: 24rpx;
		color: #000000;
		line-height: 60rpx;
	}
	.order-detail-addr view text{
		font-weight: bold;
		color: #161616;
		width: 140rpx;
		display: inline-block;
	}
	
	.order-detail-other{
		height:auto;
		background:rgba(255,255,255,1);
		border-radius:20rpx;
		padding: 36rpx 20rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
	}
	.order-detail-other view{
		font-size:24rpx;
		color:rgba(153,153,153,1);
		line-height:36rpx;
	}
	.order-detail-other .copy-now{
		width:60rpx;
		height:30rpx;
		background:rgba(255,255,255,1);
		border:1rpx solid rgba(193,193,193,1);
		border-radius:5rpx;
		padding: 0;
		line-height: 30rpx;
		font-size:20rpx;
		color:rgba(22,22,22,1);
		position: absolute;
		right: 0;
		top: 5rpx;
	}
	.pay-type-bg{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.6);
		position: fixed;
		left: 0;
		top: 0;
	}
	.pay-type-box{
		width: 500rpx;
		height: 360rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: fixed;
		left: 50%;
		top: 50%;
		margin-left: -250rpx;
		margin-top: -180rpx;
	}
	.pay-type-box .send-type-box{
		/* height:110rpx; */
		padding: 0 60rpx;
		box-sizing: border-box;
		width: 100%;
	}
	.pay-type-box .send-type-box .order-title{
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		line-height: 90rpx;
		text-align: center;
		width: 100%;
	}
	.pay-type-box .send-type-box .send-radio{
		margin-top: 10rpx;
	}
	.pay-type-box .send-type-box .send-radio label{
		padding-right: 0;
		padding-bottom: 20rpx;
	}
	.pay-type-box .send-type-box .send-radio label view{
		flex: 1;
		font-size:28rpx;
		font-family:PingFang SC;
		color:rgba(0,0,0,1);
		text-align: center;
	}
	.pay-type-box .pay-type-box .send-type-box .send-radio label view {
		text-align: left;
	}
	.pay-btn-box{
		text-align: center;
		padding-top: 20rpx;
	}
	.pay-btn-box .pay-btn{
		width: 200rpx;
		height: 60rpx;
		background: #fda600;
		box-shadow: 0 4rpx 10rpx 0 rgba(255, 109, 51, 0.5);
		border-radius: 30rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 60rpx;
		padding: 0;
	}
</style>
